<template>
  <ag-popup v-model="visible" title="微件配置" @onCancel="onCancel" class="widgets-config">
    <div class="config-content">
      <el-tabs v-model="activeKey" default-active-key="1" @tab-click="changeTab" tab-position="left">
        <el-tab-pane v-for="item in tabList" :name="item.value" :label="item.name" :key="item.value">
          <component v-bind:is="item.app" :ref="item.value"></component>
          {{item.value}}
        </el-tab-pane>
      </el-tabs>
    </div>
  </ag-popup>
</template>
<script>
  import AgPopup from "@/views/components/precut/AgPopup.vue";
  import {
    configList
  } from "./config.js";
  export default {
    components: {
      "ag-popup": AgPopup
    },
    data() {
      return {
        visible: true,
        activeKey: "",
        tabList: []
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      //初始化子组件
      init() {
        for (let i = 0; i < configList.length; i++) {
          let src = configList[i].src;
          try {
            let app = require(`${src}`).default;
            let o = {
              value: configList[i].value,
              name: configList[i].name,
              app: app
            }
            this.tabList.push(o);

          } catch (error) {
            console.log(`找不到对应的：${configList[i].value} 文件`);
          }
        }
        if (this.tabList.length > 0) {
          this.activeKey = this.tabList[0].value;
        }
      },
      changeTab(){
        // console.log('!!!')
      },
      //关闭微件
      onCancel() {
        this.visible = false;
        this.$emit("close", {
          code: "GlobalWidgetsConfig"
        });
      },
    },
  };
</script>
<style scoped>
  .widgets-config {
    width: 800px;
    height: 435px;
  }

  .config-content {
    height: 390px;
    padding: 20px 10px;
    border: 1px solid rgb(0 0 0 / 13%);
    margin: 5px;
    border-radius: 1px;
    overflow-y: auto;
  }

  .config-content::-webkit-scrollbar {
    width: 0px;
  }

  .config-content::v-deep .el-tabs__item {
    color: #FFF;
  }

  .config-content::v-deep .el-tabs__item.el-tabs__item.is-active {
    color: #409EFF;
  }



  .el-table .edit-item {
    padding-right: 10px;
  }

  .el-table::v-deep th,
  .el-table::v-deep tr {
    background: rgba(255, 255, 255, 0);
  }
</style>